<template>
  <!-- //! 回车登记的样式 -->
  <!-- //! 回车登记的样式 -->
  <!-- //! 回车登记的样式 -->
  <!-- //! 回车登记的样式 -->
  <!-- //! 回车登记的样式 -->

  <div class="branches">
    <div class="app-container">
      <!-- 上 -->
      <div class="top background">
        <div id="topForm">
          <el-form id="searchForm" label-position="right" label-width="100px">

            <div id="elForm">
              <el-form-item label="运输任务编号">
                <el-input placeholder="请输入运输任务编号" />
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="目的地机构">
                <el-cascader
                  :options="organization"
                  :props="defayktProps"
                  :show-all-levels="false"
                  clearable
                />
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="回车时间">
                <el-date-picker
                  style="width:215px"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="起始地机构">
                <el-cascader
                  :options="organization"
                  :props="defayktProps"
                  :show-all-levels="false"
                  clearable
                />
              </el-form-item>
            </div>
            <div class="flex-container" style="margin-left:50px"> <!-- 添加一个包装容器 -->
              <el-button type="primary" style="flex-shrink: 0; flex: none;">搜索</el-button>
              <el-button type="primary" style="flex-shrink: 0; flex: none;">重置</el-button>
            </div>
          </el-form>

        </div>
      </div>
      <!-- 下 -->
      <div class="button background">
        <div id="form2">

          <!-- 表单 -->
          <el-table
            stripe
            style="width: 100%"
            :data="carBackList"
          >
            <el-table-column
              prop="transportTaskId"
              label="任务运输编号"
              width="180"
            />
            <el-table-column
              prop="startAgencyName"
              label="起始地机构"
              width="180"
            />
            <el-table-column
              prop="endAgencyName"
              label="目的地机构"
            />
            <el-table-column
              prop="transportOrderNumber"
              label="运单数量"
            />
            <el-table-column
              prop="outStorageTime"
              label="出车时间"
              width="180"
            />
            <el-table-column
              prop="intoStorageTime"
              label="回车时间"
              width="180"
            />
            <el-table-column
              prop="licensePlate"
              label="车牌号码"
            />
            <el-table-column
              prop="isAvailable"
              label="车辆是否可用"
            >
              <template v-slot="{row}">
                <span v-if="row.isAvailable === true">可用</span>
                <span v-else>不可用</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
            />
          </el-table>
          <!-- 分页 -->
          <div id="demonstration">
            <el-pagination
              :page-sizes="[10, 20, 30, 50]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(total)"
              @size-change="sizeChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrganizationTree } from '@/api/vehicleReturn'
import { getBackList } from '@/api/vehicleBack'
export default {
  data() {
    return {
      pageParams: {
        page: 1,
        pageSize: 10
      },
      carBackList: [], // 回车列表
      total: 0, // 总条数
      organization: [], // 树状机构
      defayktProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        checkStrictly: true,
        emitPath: false
      }
    }
  },
  created() {
    this.getList()
    this.getOrgTree()
  },
  methods: {
    // 渲染
    async getList() {
      const res = await getBackList(this.pageParams)
      console.log(res)
      this.carBackList = res.data.items
      this.total = res.data.counts
    },
    // 每页条数
    sizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getList()
    },
    // ! 获取机构树状
    async getOrgTree() {
      const res = await getOrganizationTree()
      console.log(res)
      this.organization = JSON.parse(res.data)
      console.log(this.organization)
    }
  }
}
</script>

  <style scoped>
    /* 表单二 */
  #form2{
    padding: 20px;

  }
  #demonstration{
    text-align: center;
    margin-top: 20px;
  }
  /* 表单一 */
.flex-container{
  padding-left: 18px;
}
  #searchForm{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    /* 居中 */
    padding-top: 20px;
  }
  .branches{
    margin-left: 10px;
    margin-right: 10px;
  }
  .background{
    background: #ffffff;
    margin-top: 25px;
  }
  .top{
    height: 140px;
  }
  /* .button{
    height:700px ;
  } */
  .el-input{
    width: 215px;
  }
  #elForm{
    margin: 0 80px 0 80px;
  }
  </style>

